import React, {Component} from 'react';
import commonConfig from "../../../static/js/commonConfig";
import Iconfont from "../../../utils/iconfont";
import '../../../static/scss/fileViewer/component/videoComponent.scss'
import $ from "../../../utils/jquery-vendor";

class VideoComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fileList: []
        };
    }

    componentDidMount() {
        const {videoList} = this.props;
        this.setFileData(videoList);
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const {videoList} = nextProps;
        this.setFileData(videoList);
    }

    setFileData = (videoList) => {
        if (videoList !== this.state.fileList) {
            this.setState({fileList: videoList})
        }
    }

    /*视频加载完获取总时长*/
    onLoadedData = (item, e) => {
        let duration = e.target.duration;
        item['duration'] = commonConfig.countVideoDuration(duration);
        this.setState({fileList: this.state.fileList});
    }

    /*监听视频播放*/
    onPlayData = (item) => {
        item['play'] = true;
        this.setState({fileList: this.state.fileList});
    }

    /*监听视频暂停*/
    onPauseData = (item) => {
        item['play'] = false;
        this.setState({fileList: this.state.fileList});
    }

    /*播放暂停视频*/
    onPlayVideo = (item, e) => {
        let video = $(e.currentTarget).parents('li').find("video");
        video = video[0];
        if (item.play) {
            video.pause();
        } else {
            video.play();
        }
    }

    /*全屏播放当前视频*/
    fullScreenVideo = (item, e) => {
        let video = $(e.currentTarget).parents('li').find("video");
        video = video[0];
        video['webkitRequestFullscreen']();
    }

    render() {
        const {fileList} = this.state;
        return (
            <>
                <div className="video_component_module">
                    <ul className="clearFix">
                        {fileList.map((item, i) =>
                            <li key={i} className="float-left">
                                <video controls={false}
                                       onLoadedData={this.onLoadedData.bind(this, item)}
                                       onPlay={this.onPlayData.bind(this, item)}
                                       onPause={this.onPauseData.bind(this, item)}>
                                    <source src={commonConfig.downloadFile(item)} type="video/mp4"/>
                                </video>
                                <span className="duration">{item.duration || '00:00'}</span>
                                <div className="play_video">
                                    <span onClick={this.onPlayVideo.bind(this, item)}>
                                        <Iconfont type={item.play ? "icon-zanting1" : "icon-bofang"}/>
                                    </span>
                                </div>
                                <span className="full_screen" onClick={this.fullScreenVideo.bind(this, item)}>
                                    <Iconfont type="icon-quanping1"/>
                                </span>
                                <p>{item.name}</p>
                            </li>
                        )}
                    </ul>
                </div>
            </>
        )
    }
}

export default VideoComponent